import * as React from "react";

import { IconProps } from "..";
import "../index.scss";

export const Hand: React.FunctionComponent<IconProps> = props => {
  const size = props.size ? props.size : "18";
  const color = props.color ? props.color : "#FFFFFF";

  return (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4.73777 10.0915C4.46976 9.81259 4.44286 9.34238 4.67672 9.02853C4.90178 8.7267 5.29293 8.67344 5.57698 8.90539L6.27391 9.47525L6.7913 9.8985V5.29091C6.7913 4.97476 7.02309 4.71818 7.30869 4.71818C7.59481 4.71818 7.82608 4.97476 7.82608 5.29091V8.15455H8.34347V4.14545C8.34347 3.82931 8.57527 3.57273 8.86087 3.57273C9.14698 3.57273 9.37826 3.82931 9.37826 4.14545V8.15455H9.89565V4.71818C9.89565 4.40204 10.1274 4.14545 10.413 4.14545C10.6992 4.14545 10.9304 4.40204 10.9304 4.71818V8.15455H11.4478V6.43636C11.4478 6.12022 11.6796 5.86364 11.9652 5.86364C12.2513 5.86364 12.4826 6.12022 12.4826 6.43636V11.0182C12.4826 12.6001 11.3247 13.8818 9.89565 13.8818H9.37826C8.57475 13.8818 7.85713 13.4763 7.38216 12.8395C7.36353 12.8234 7.34491 12.8051 7.32732 12.7868L4.73777 10.0915ZM7.0143 13.2455L6.9729 13.2043L4.38336 10.509C3.91667 10.0234 3.86959 9.21065 4.27781 8.66427C4.67724 8.1282 5.3783 8.03084 5.88431 8.44435L6.27391 8.76335V5.29091C6.27391 4.65862 6.73749 4.14545 7.30869 4.14545C7.49754 4.14545 7.67397 4.20101 7.82608 4.29895V4.14545C7.82608 3.51316 8.28967 3 8.86087 3C9.31255 3 9.69645 3.32015 9.8377 3.76631C10.0022 3.64375 10.1999 3.57273 10.413 3.57273C10.9848 3.57273 11.4478 4.08589 11.4478 4.71818V5.4444C11.5999 5.34704 11.7769 5.29091 11.9652 5.29091C12.5369 5.29091 13 5.80407 13 6.43636V11.0182C13 12.9162 11.6103 14.4545 9.89565 14.4545H9.37826C8.43143 14.4545 7.58291 13.9843 7.01378 13.2455H7.0143Z"
        fill={color}
      />
    </svg>
  );
};
